<template>
    <div class="search-page">
        <div class="search-title">{{ $t('message.placeholder.search') }}</div>
        <div class="search-container">
            <div class="search-left">
                <div class="search-type-box">
                    <el-select class="proviso-item" @change="searchHandle" v-model="type"
                        :placeholder="$t('message.placeholder.documentType')">
                        <el-option v-for="item in typeOption" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select class="proviso-item" @change="searchHandle" v-model="timeScope"
                        :placeholder="$t('message.placeholder.updateTime')">
                        <el-option v-for="item in timeScopeOption" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select class="proviso-item" @change="searchHandle" v-model="shareRole"
                        :placeholder="$t('message.placeholder.libraryLevel')">
                        <el-option v-for="item in shareRoleOption" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select class="proviso-item" @change="searchHandle" v-model="searchContentType"
                        :placeholder="$t('message.placeholder.searchSubject')">
                        <el-option v-for="item in searchContentTypeOption" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select class="proviso-item" @change="searchHandle" v-model="searchType">
                        <el-option v-for="item in searchTypeOption" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="search-label-box">
                    <div class="search-title">
                        <div class="result">
                            {{ $t('message.text.searchResult') }}
                            <span class="num">{{ searchPage.total }}</span>
                            {{ $t('message.strip') }}
                        </div>
                    </div>
                    <div class="knowledge-label-box"
                        :style="{ paddingBottom: (dlibrarySearch.id || checkLabelList.length > 0) ? '' : '0px' }">
                        <div class="dlibrary-search" v-if="dlibrarySearch.id">
                            <div>{{ $t('message.text.library') }}：</div>
                            <div class="dlibrary-search-item">
                                <div class="name" v-tooltip-auto-show effect="light">
                                    <el-tooltip :content="dlibrarySearch.name">
                                        {{ dlibrarySearch.name }}
                                    </el-tooltip>
                                </div>
                                <svg class="close-icon" @click="clearDlibrary">
                                    <use xlink:href="#keowledge-anniuguanbi-lanse"></use>
                                </svg>
                            </div>
                        </div>
                        <div v-if="checkLabelList.length > 0" class="label-box"
                            :style="{ marginLeft: dlibrarySearch.id ? '' : '0px' }">
                            <div>{{ $t('message.text.label') }}：</div>
                            <div class="knowledge-item" v-for="(item, index) in checkLabelList"
                                :style="{ color: item.colour, backgroundColor: taskNameColor[item.colour], borderColor: taskNameColor[item.colour] }">
                                <div class="name" v-tooltip-auto-show>
                                    <el-tooltip :content="item.tagName" effect="light">
                                        {{ item.tagName }}
                                    </el-tooltip>
                                </div>
                                <i class="knowledge-iconfont keowledge-anniuguanbi-huangse" :style="{ color: item.colour }"
                                    @click="deleteLabel(item, index)"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="search-left-container" v-loading="searchPageLoading">
                    <el-scrollbar ref="searchListRef" v-if="searchList.length != 0">
                        <div class="search-item" v-for="(item, index) in searchList" :key="index"
                            @click="openFile(item)">
                            <svg class="search-file-icon">
                                <use v-bind:xlink:href="getIcon(item.type, item.nameSuffix)"></use>
                            </svg>
                            <div class="search-file-body">
                                <div class="file-name" v-html="item.name"></div>
                                <div class="file-content" v-html="item.content"></div>
                                <div class="file-other-info">
                                    <div class="time-auth">
                                        <div class="time">
                                            <svg class="icon">
                                                <use xlink:href="#keowledge-shijian"></use>
                                            </svg>
                                            {{ item.createTime }}
                                        </div>
                                        <div class="auth" v-tooltip-auto-show>
                                            <el-tooltip :content="item.authorName">
                                                <span>
                                                    <svg class="icon">
                                                        <use xlink:href="#keowledge-chuangjianren"></use>
                                                    </svg>
                                                    {{ item.authorName }}
                                                </span>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                    <div class="know" v-tooltip-auto-show>
                                        <el-tooltip :content="item.knowledgeName">
                                            <span>
                                                <svg class="icon">
                                                    <use xlink:href="#keowledge-wendangweizhi"></use>
                                                </svg>
                                                {{ item.knowledgeName }}
                                            </span>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="loading-finish" v-if="(searchPage.page * searchPage.size) > searchPage.total">
                            {{ $t('message.text.showAllSearch') }}
                        </div>
                        <div v-else class="loding-more" v-loading="moreLoading" @click="loadMore">
                            {{ moreLoading ? $t('message.text.loading') : $t('message.text.loadingMore') }}
                        </div>
                    </el-scrollbar>
                    <jvs-empty imgSrc="@/assets/images/common/searchEmpty.png" :text="$t('message.empty.null')"
                        textMarginTop="0px" v-if="searchList.length == 0"></jvs-empty>
                </div>
            </div>
            <div class="search-right">
                <div class="lately-search-box" v-resize="onResize">
                    <div class="lately-title">
                        <div>{{ $t('message.text.recentSearch') }}</div>
                        <svg class="lately-del" @click="delHistory">
                            <use xlink:href="#keowledge-qingchulishijilu"></use>
                        </svg>
                    </div>
                    <div class="lately-body">
                        <template v-if="historyList.length != 0">
                            <template v-for="(item, index) in historyList">
                                <div class="lately-item" :key="index" v-if="index < 12" @click="setSearchVal(item)"
                                    v-tooltip-auto-show>
                                    <!-- effect="customtip" -->
                                    <el-tooltip :content="item.historyName" effect="light">
                                        <span>{{ item.historyName }}</span>
                                    </el-tooltip>
                                </div>
                            </template>
                        </template>
                        <jvs-empty imgSrc="@/assets/images/common/searchEmpty.png" v-if="historyList.length == 0"
                            size="140px" :text="$t('message.empty.null')" textMarginTop="0px"></jvs-empty>
                    </div>
                </div>
                <div class="line"></div>
                <div :style="{ height: `calc(100% - ${lsbh}px - 33px)` }">
                    <div class="knowledge-box">
                        <div class="title">
                            <svg class="icon">
                                <use xlink:href="#keowledge-wenku-sousuojieguo"></use>
                            </svg>
                            {{ $t('message.text.library') }}
                        </div>
                        <div class="lists" v-loading="knowledgePage.loading"
                            :class="[knowledgePage.total <= knowledgePage.size && 'no-lists']"
                            :style="{ height: knowledgePage.total > knowledgePage.size ? 'calc(100% - 72px)' : 'calc(100% - 32px - 5px)' }">
                            <el-scrollbar v-if="dlibraryList.length != 0">
                                <div :class="['list-item', item.id == dlibrarySearch.id && 'item-active']"
                                    v-for="(item, index) in dlibraryList" :key="index" @click="setLibary(item)">
                                    <div class="tag" :class="[item.shareRole]">
                                        {{ findByvalue(shareRoleOption, item.shareRole) }}</div>
                                    <div class="name" v-tooltip-auto-show>
                                        <el-tooltip :content="item.name" effect="light">
                                            {{ item.name }}
                                        </el-tooltip>
                                    </div>
                                </div>
                            </el-scrollbar>
                            <jvs-empty v-if="dlibraryList.length == 0" :text="$t('message.empty.empty')" size="150px"
                                textSize="14px" textClass="empty-tips"></jvs-empty>
                        </div>
                        <div class="page" v-if="knowledgePage.total > knowledgePage.size">
                            <svg class="icon" @click="cutPage('know')">
                                <use xlink:href="#keowledge-a-zu4701-copy"></use>
                            </svg>
                            <el-input-number v-model="knowledgePage.page" :min="1"
                                :max="Math.ceil(knowledgePage.total / knowledgePage.size)" controls-position="right"
                                @blur="numberBlur('know')" @keyup.enter="numberBlur('know')"></el-input-number>
                            <span class="split">/</span>
                            <span>{{ Math.ceil(knowledgePage.total / knowledgePage.size) }}</span>
                            <svg class="icon" @click="addPage('know')">
                                <use xlink:href="#keowledge-a-zu4701"></use>
                            </svg>
                        </div>
                    </div>
                    <div class="line"></div>
                    <div class="label-box">
                        <div class="title">
                            <svg class="icon">
                                <use xlink:href="#keowledge-biaoqian-sousuojieguo1"></use>
                            </svg>
                            {{ $t('message.text.label') }}
                        </div>
                        <div class="lists" v-loading="labelPage.loading"
                            :class="[labelPage.total <= labelPage.size && 'no-lists']"
                            :style="{ height: labelPage.total > labelPage.size ? 'calc(100% - 84px)' : 'calc(100% - 32px - 5px)' }">
                            <el-scrollbar v-if="labelList.length != 0">
                                <div :class="['list-item', checkLabel(item) != -1 && 'item-active']"
                                    v-for="(item, index) in labelList" :key="index" @click="setLabelList(item)">
                                    <div class="badge-item-dot" :class="`badge-item-${item.colour || 'blue'}`"
                                        :style="{ background: item.colour }"></div>
                                    <div class="name" v-tooltip-auto-show>
                                        <el-tooltip :content="item.tagName" effect="light">
                                            <span>{{ item.tagName }}</span>
                                        </el-tooltip>
                                    </div>
                                </div>
                            </el-scrollbar>
                            <jvs-empty v-if="labelList.length == 0" :text="$t('message.empty.nullLabel')" size="150px"
                                textSize="14px" textClass="empty-tips"></jvs-empty>
                        </div>
                        <div class="page" v-if="labelPage.total > labelPage.size">
                            <svg class="icon" @click="cutPage('label')">
                                <use xlink:href="#keowledge-a-zu4701-copy"></use>
                            </svg>
                            <el-input-number v-model="labelPage.page" :min="1"
                                :max="Math.ceil(labelPage.total / labelPage.size)" controls-position="right"
                                @blur="numberBlur('label')" @keyup.enter="numberBlur('label')"></el-input-number>
                            <span class="split">/</span>
                            <span>{{ Math.ceil(labelPage.total / labelPage.size) }}</span>
                            <svg class="icon" @click="addPage('label')">
                                <use xlink:href="#keowledge-a-zu4701"></use>
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    toRefs,
    watch,
    onMounted,
    getCurrentInstance
} from 'vue'
import { useHookI18n } from '@/hooks/i18n'
import { knowledgeFrequently, getDcLibraryList } from '@/api/knowledge'
import indexDB from '@/utils/indexDB.js'
import { getTagAlls } from '@/api/tag'
import { documentSearch } from '@/api/common'
import { getStore } from '@/utils/store'
import { findByvalue } from '@/utils/util.js'
import { useRouter, useRoute } from "vue-router"
const router = useRouter();
const route = useRoute()
const { locale, $t } = useHookI18n()
const { proxy } = getCurrentInstance()
const emit = defineEmits([""])
const props = defineProps({

})

const searchVal = ref()
const type = ref('')
const searchContentType = ref('')
const searchType = ref('1')
const shareRole = ref('')
const timeScope = ref('')
const typeOption = ref([{
    label: $t('message.typeMenu.allType'),
    value: ''
}, {
    label: $t('message.typeMenu.text'),
    value: 'document_html'
}, {
    label: $t('message.typeMenu.form'),
    value: 'document_xlsx'
}, {
    label: $t('message.typeMenu.mindMap'),
    value: 'document_map'
}, {
    label: $t('message.typeMenu.process'),
    value: 'document_flow'
}, {
    label: $t('message.typeMenu.word'),
    value: 'office_doc'
}, {
    label: $t('message.typeMenu.excel'),
    value: 'office_xlsx'
}, {
    label: $t('message.typeMenu.pdf'),
    value: 'office_pdf'
}, {
    label: $t('message.typeMenu.ppt'),
    value: 'office_ppt'
}]
)
const searchContentTypeOption = ref([{
    label: $t('message.typeMenu.titleAndContent'),
    value: ""
}, {
    label: $t('message.typeMenu.title'),
    value: "1"
}, {
    label: $t('message.typeMenu.content'),
    value: "2"
}]
)
const searchTypeOption = ref([{
    label: $t('message.typeMenu.fuzzySearch'),
    value: "1"
}, {
    label: $t('message.typeMenu.accurateSearch'),
    value: "2"
}]
)
const shareRoleOption = ref([{
    label: $t('message.typeMenu.allLeves'),
    value: ""
}, {
    label: $t('message.typeMenu.wholeNetwork'),
    value: "all"
}, {
    label: $t('message.typeMenu.enterprise'),
    value: "register"
}, {
    label: $t('message.typeMenu.private'),
    value: "user"
}]
)
const timeScopeOption = ref([{
    label: $t('message.typeMenu.allTimes'),
    value: ""
}, {
    label: $t('message.typeMenu.lastHours24'),
    value: "ONE_DAY"
}, {
    label: $t('message.typeMenu.lastDay7'),
    value: "SEVEN_DAY"
}, {
    label: $t('message.typeMenu.lastDay30'),
    value: "ONE_MONTH"
}]
)
const taskNameColor = reactive({
    "#56ABFB": 'rgba(86, 171, 251, 0.2)',
    "#5DCFFF": 'rgba(93, 207, 255, 0.2)',
    "#5BE2EE": 'rgba(91, 226, 238, 0.2)',
    "#40E0C3": 'rgba(64, 224, 195, 0.2)',
    "#3DD1AE": 'rgba(61, 209, 174, 0.2)',
    "#A9E072": 'rgba(169, 224, 114, 0.2)',
    "#84E17E": 'rgba(132, 225, 126, 0.2)',
    "#73D897": 'rgba(115, 216, 151, 0.2)',
    "#F4D66D": 'rgba(244, 214, 109, 0.2)',
    "#868AF6": 'rgba(134, 138, 246, 0.2)',
    "#9A7EF4": 'rgba(154, 126, 244, 0.2)',
    "#D287F8": 'rgba(210, 135, 248, 0.2)',
    "#F693E7": 'rgba(246, 147, 231, 0.2)',
    "#FB7FB7": 'rgba(251, 127, 183, 0.2)',
    "#FB7894": 'rgba(251, 120, 148, 0.2)',
    "#FA8888": 'rgba(250, 136, 136, 0.2)',
    "#FF9F73": 'rgba(255, 159, 115, 0.2)',
    "#F6C659": 'rgba(246, 198, 89, 0.2)',
    "#D2D2D5": 'rgba(210, 210, 213, 0.2)'
})
let searchPage = reactive({
    size: 50,
    page: 1,
    total: 0
})
const labelList = ref([])
let labelPage = reactive({
    size: 20,
    backPage: 1,
    page: 1,
    total: 0,
    loading: false
})
const dlibraryList = ref([])
let knowledgePage = reactive({
    size: 20,
    page: 1,
    backPage: 1,
    total: 0,
    loading: false
})
const dlibrarySearch = ref<any>({
    id: '',
    name: "",
    tenantId: ""
})
const checkLabelList = ref([])
const searchList = ref([])
const searchPageLoading = ref(false)
const moreLoading = ref(true)
const searchListRef = ref()
const historyList = ref([])
const knowledgeDB = ref(null)
const lsbh = ref(0)
onMounted(() => {
    searchVal.value = route.query.searchText || ''
    indexDB.openDB('knowledgeDB', 1, knowledgeDB.value, { name: 'historyList', key: 'historyListKey' }, function (db) {
        knowledgeDB.value = db
        indexDB.readAll(db, "historyList").then(res => {
            historyList.value = res.reverse()
        })
    });
    getKnowledgeAll()
    getLabelAll()
    init()
})

watch(() => route.query.searchText, (newV) => {
    searchVal.value = newV || ''
    init()
}, { deep: true })

function init() {
    searchPageLoading.value = true
    getSearch()
}
function getKnowledgeAll() {
    getDcLibraryList({
        size: knowledgePage.size,
        current: knowledgePage.page
    }).then(res => {
        if (res.data.code == 0) {
            knowledgePage.loading = false
            knowledgePage.total = res.data.data.total
            dlibraryList.value = res.data.data.records
        }
    })
}
function getLabelAll() {
    getTagAlls({
        size: labelPage.size,
        current: labelPage.page,
    }).then(res => {
        if (res.data.code == 0) {
            labelPage.loading = false
            labelPage.total = res.data.data.total
            labelList.value = res.data.data.records
        }
    })
}
interface labelObj {
    id: String
}
function setLabelList(item: labelObj) {
    let i = checkLabel(item)
    if (i == -1) {
        checkLabelList.value.push(item)
    } else {
        checkLabelList.value.splice(i, 1)
    }
    searchPage.page = 1
    searchPageLoading.value = true
    getSearch()
}
function setLibary(item) {
    searchPageLoading.value = true
    dlibrarySearch.value = item
    searchPage.page = 1
    getSearch()
}
function checkLabel(item: labelObj) {
    let flag = -1
    checkLabelList.value.forEach((i: labelObj, index) => {
        if (item.id == i.id) {
            flag = index
        }
    })
    return flag
}
function clearDlibrary() {
    searchPageLoading.value = true
    dlibrarySearch.value = {
        id: '',
        name: '',
        tenantId: ""
    }
    searchPage.page = 1
    getSearch()
}
function deleteLabel(item, index) {
    searchPageLoading.value = true
    checkLabelList.value.splice(index, 1)
    searchPage.page = 1
    getSearch()
}
function getSearch(isPush = false) {
    interface obj {
        dcId?: any,
        knowledgeId?: any,
        sameTenant?: any,
        timeScope?: String,
        searchType?: String,
        searchContentType?: String,
        type?: String,
        shareRole?: String
    }
    let obj: obj = {
        dcId: null,
        knowledgeId: null,
        sameTenant: null,
    }
    obj = {
        dcId: null,
        knowledgeId: null,
        sameTenant: null,
        timeScope: timeScope.value,
        searchType: searchType.value,
        searchContentType: searchContentType.value,
        type: type.value,
        shareRole: shareRole.value,
    }
    if (dlibrarySearch.value.id) {
        obj.dcId = dlibrarySearch.value.id
        obj.knowledgeId = dlibrarySearch.value.id
        if (dlibrarySearch.value.tenantId == getStore({ name: 'tenantId' })) {
            obj.sameTenant = true
        } else {
            obj.sameTenant = false
        }
    }
    let tagName = ''
    checkLabelList.value.forEach((item) => {
        tagName += item.tagName + ' '
    })
    documentSearch({
        keyword: searchVal.value,
        size: searchPage.size,
        current: searchPage.page,
        search: false,
        isNotNull: false,
        tagName: tagName,
        ...obj
    }).then(res => {
        if (res.data.code == 0) {
            if (isPush) {
                searchList.value.push(...res.data.data.records)
            } else {
                searchList.value = res.data.data.records
            }
            searchPage.total = res.data.data.total
            moreLoading.value = false
            searchPageLoading.value = false
            if (!isPush) {
                searchListRef.value.scrollTo(0, 0, 0)
            }
        }
    }).catch(err => {
        moreLoading.value = false
        searchPageLoading.value = false
    })
}
function loadMore() {
    searchPage.page += 1
    moreLoading.value = true
    getSearch(true)
}
function delHistory() {
    proxy.$confirm($t('message.confirm.clearHistory'), $t('message.clear'), {
        confirmButtonText: $t('message.buttons.submit'),
        cancelButtonText: $t('message.buttons.cancal'),
        type: 'warning'
    }).then(() => {
        indexDB.clearData(knowledgeDB.value, "historyList", function () {
            historyList.value = []
        })
    })
}
function onResize(dom) {
    lsbh.value = dom.height
}
function openFile(item) {
    router.push({
        path: `/knowledge/all/${item.knowledgeId}`,
        query: {
            docId: item.dcLibraryId || item.docId
        }
    })
}
function setSearchVal(item) {
    searchVal.value = item.historyName
    router.push({
        path: '/search',
        query: {
            searchText: item.historyName
        }
    })
}
function searchHandle() {
    searchPage.page = 1
    indexDB.readAll(knowledgeDB.value, "historyList").then(res => {
        historyList.value = res.reverse()
    })
    searchPageLoading.value = true
    getSearch()
}
</script>
<style lang="scss" scoped>
.search-page {
    width: 100%;
    height: 100%;
    padding: 0px 24px;
    box-sizing: border-box;

    .search-title {
        @include SourceHanSansCN-Bold;
        font-size: 20px;
        color: #363b4c;
    }

    .search-container {
        display: flex;
        height: calc(100% - 30px);

        .search-right {
            height: calc(100% - 16px);
            width: 300px;
            padding: 0px 0px 0 24px;
            margin-top: 16px;
            box-sizing: border-box;
            border-left: 1px solid #EEEFF0;

            .lately-title {
                display: flex;
                align-items: center;
                justify-content: space-between;
                font-size: 14px;
                color: #363B4C;
                @include SourceHanSansCN-Bold;

                .lately-del {
                    width: 16px;
                    height: 16px;
                    cursor: pointer;
                }
            }

            .lately-search-box {
                .lately-body {
                    padding-top: 16px;
                    display: flex;
                    flex-wrap: wrap;
                    grid-row-gap: 16px;
                    grid-column-gap: 16px;

                    .lately-item {
                        height: 28px;
                        line-height: 28px;
                        background: #F5F6F7;
                        border-radius: 4px;
                        color: #363B4C;
                        font-size: 14px;
                        @include SourceHanSansCN-Regular;
                        min-width: 80px;
                        max-width: 155px;
                        overflow: hidden;
                        display: inline-block;
                        text-overflow: ellipsis;
                        white-space: pre;
                        text-align: center;
                        cursor: pointer;
                        padding: 0px 8px;
                        box-sizing: border-box;

                        &:hover {
                            background: #EEEFF0;
                        }
                    }
                }
            }

            .knowledge-box,
            .label-box {
                height: calc((100% - 33px) / 2);

                .title {
                    font-size: 14px;
                    color: #363b4c;
                    display: flex;
                    @include SourceHanSansCN-Bold;
                    align-items: center;
                    margin-bottom: 16px;

                    .icon {
                        width: 16px;
                        height: 16px;
                        margin-right: 8px;
                    }
                }

                .page {
                    display: flex;
                    align-items: center;
                    justify-content: end;
                    font-size: 14px;
                    @include SourceHanSansCN-Regular;
                    color: #575e73;
                    height: 20px;

                    .icon {
                        width: 18px;
                        min-width: 18px;
                        height: 18px;
                        cursor: pointer;
                    }

                    .el-input-number {
                        width: 32px;
                        height: 20px;

                        .el-input-number__decrease,
                        .el-input-number__increase {
                            display: none;
                        }

                        .el-input__wrapper {
                            background-color: #F5F6F7 !important;
                            box-shadow: none !important;
                            padding: 0px 4px !important;
                            box-sizing: border-box !important;
                        }
                    }

                    .split {
                        padding: 0px 8px 3px;
                    }
                }

                .lists {
                    margin: 0px 0px 16px;

                    .empty-tips {
                        color: #6F7588;
                    }

                    .list-item {
                        display: flex;
                        align-items: center;
                        height: 24px;
                        font-size: 12px;
                        color: #363b4c;
                        @include SourceHanSansCN-Regular;
                        cursor: pointer;

                        &:hover {
                            background-color: #F5F6F7;
                        }
                    }

                    .list-item+.list-item {
                        margin-top: 8px;
                    }

                    .item-active {
                        background-color: #E4EDFF !important;
                    }
                }

                .no-lists {
                    margin-bottom: 0px;
                }
            }

            .knowledge-box {
                .lists {
                    .list-item {
                        padding: 0px 3px;

                        .tag {
                            padding: 2px 4px;
                            box-sizing: border-box;
                            border-radius: 5px 0px 5px 0px;
                            display: flex;
                            align-items: center;
                            font-size: 10px;
                            height: 16px;
                            line-height: 16px;
                        }

                        .user {
                            background: #FFE7ED;
                            color: #FF194C;
                        }

                        .all {
                            background: #E8F0FF;
                            color: #1E6FFF;
                        }

                        .register {
                            background: #E9F7EC;
                            color: #36B452;
                        }

                        .name {
                            margin-left: 8px;
                            width: 130px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        &:hover {
                            .tag {
                                background-color: transparent;
                            }
                        }
                    }
                }
            }

            .line {
                height: 1px;
                background: #EEEFF0;
                margin: 16px 0px;
            }

            .label-box {
                .lists {
                    .list-item {
                        .badge-item-dot {
                            width: 8px;
                            height: 8px;
                            min-width: 8px;
                            border-radius: 2px;
                            margin-left: 2px;
                            margin-right: 8px;
                        }

                        .name {
                            width: 155px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .tag {
                            color: #73b4fb;
                            background-color: rgba(244, 247, 249, 100);
                            font-size: 12px;
                            border-radius: 2px;
                            padding: 0px 3px;
                            margin-right: 9px;
                            margin-left: 3px;
                        }
                    }
                }
            }
        }

        .search-left {
            width: calc(100% - 300px);
            ;

            // padding-right: 8px;
            .search-type-box {
                padding: 16px 8px 0px 0;
                box-sizing: border-box;
                display: flex;
                grid-column-gap: 16px;

                .proviso-item {
                    width: 96px;
                    height: 32px;

                    ::v-deep(.el-input__wrapper) {
                        height: 32px !important;
                        padding: 0px 5px !important;
                        background: #F5F6F7 !important;
                        box-shadow: none !important;
                        border-color: #F5F6F7 !important;

                        input {
                            color: #6F7588;
                            text-align: center;
                        }

                        .el-select__icon {
                            margin-left: 0px;
                        }
                    }

                    ::v-deep(.is-focus) {
                        .el-input__wrapper {
                            background: #F5F6F7 !important;
                            box-shadow: none !important;
                            border-color: #F5F6F7 !important;

                            input {
                                color: #1E6FFF;
                                text-align: center;
                            }
                        }
                    }

                    &:hover {
                        ::v-deep(.el-input__wrapper) {
                            background: #EEEFF0 !important;
                            box-shadow: none !important;
                            border-color: #F5F6F7 !important;
                        }
                    }

                    border-radius: 4px;
                }
            }

            .search-label-box {
                display: flex;
                align-items: center;
                padding-right: 8px;

                .search-title {
                    font-size: 14px;
                    padding: 16px 24px 16px 0px;
                    box-sizing: border-box;
                    @include SourceHanSansCN-Regular;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    .result {
                        color: #363B4C;

                        .num {
                            color: #1E6FFF;
                            @include SourceHanSansCN-Bold;
                        }
                    }
                }

                .knowledge-label-box {
                    display: flex;
                    align-items: center;
                    // padding: 0px 24px 16px;
                    box-sizing: border-box;
                    font-size: 14px;
                    color: #6F7588;

                    .dlibrary-search {
                        display: flex;
                        align-items: center;

                        .dlibrary-search-item {
                            height: 24px;
                            line-height: 24px;
                            background: #F2F7FF;
                            border-radius: 2px 2px 2px 2px;
                            display: flex;
                            align-items: center;
                            max-width: 120px;
                            padding: 0px 4px;
                            box-sizing: border-box;
                            font-size: 12px;
                            color: #1E6FFF;
                            @include SourceHanSansCN-Regular;

                            .name {
                                max-width: 110px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            .close-icon {
                                width: 12px;
                                height: 12px;
                                min-width: 12px;
                                cursor: pointer;
                                margin-left: 4px;
                            }
                        }
                    }

                    .label-box {
                        margin-left: 16px;
                        display: flex;
                        align-items: center;

                        .knowledge-item {
                            height: 24px;
                            line-height: 24px;
                            border-radius: 3px;
                            max-width: 120px;
                            padding: 0px 4px;
                            box-sizing: border-box;
                            font-size: 12px;
                            display: flex;
                            align-items: center;

                            .name {
                                max-width: 60px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }

                            i {
                                font-size: 12px;
                                cursor: pointer;
                                margin-left: 8px;
                            }
                        }

                        .knowledge-item+.knowledge-item {
                            margin-left: 12px;
                        }
                    }
                }
            }

            .search-left-container {
                height: calc(100% - 100px);

                .search-item {
                    padding: 8px 24px;
                    margin-bottom: 8px;
                    margin-right: 8px;
                    display: flex;
                    cursor: pointer;

                    &:hover {
                        background: #f5f6f7;
                    }

                    .search-file-icon {
                        width: 24px;
                        height: 24px;
                        min-width: 24px;
                        margin-top: 16px;
                    }

                    .search-file-body {
                        margin-left: 16px;
                        width: 100%;

                        .file-name {
                            cursor: default;
                            font-size: 14px;
                            @include SourceHanSansCN-Bold;
                            color: #363B4c;
                            margin-bottom: 4px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 1;
                            line-clamp: 1;
                            -webkit-box-orient: vertical;
                            word-break: break-all;

                            ::v-deep(em) {
                                @include SourceHanSansCN-Bold;
                                color: #1E6FFF !important;
                                font-style: normal !important;
                            }
                        }

                        .file-content {
                            font-size: 12px;
                            margin-bottom: 4px;
                            color: #575E73;
                            @include SourceHanSansCN-Regular;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            line-clamp: 2;
                            -webkit-box-orient: vertical;
                            word-break: break-all;

                            ::v-deep(em) {
                                color: #1E6FFF !important;
                                font-style: normal !important;
                            }
                        }

                        .file-other-info {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            font-size: 12px;
                            color: #6F7588;

                            .time-auth {
                                display: flex;
                                align-items: center;
                            }

                            .icon {
                                width: 12.75px;
                                min-width: 12.75px;
                                height: 12.75px;
                                margin-right: 2px;
                            }

                            .auth {
                                margin-left: 14px;
                                width: 150px;
                                overflow: hidden;
                                display: inline-block;
                                text-overflow: ellipsis;
                                white-space: pre;

                                ::v-deep(span) {
                                    display: flex;
                                    align-items: center;
                                }
                            }

                            .time {
                                width: 150px;
                                display: flex;
                                align-items: center;
                            }

                            .know {
                                margin-left: 4px;
                                width: 150px;
                                text-align: right;
                                overflow: hidden;
                                display: inline-block;
                                text-overflow: ellipsis;
                                white-space: pre;

                                ::v-deep(span) {
                                    display: flex;
                                    align-items: center;
                                    justify-content: end;
                                }
                            }
                        }
                    }
                }

                .search-item+.search-item {
                    margin-top: 8px;
                }

                .loding-more,
                .loading-finish {
                    margin: 0 24px;
                    padding: 16px 0px;
                    color: #575E73;
                    text-align: center;
                    border-top: 1px solid #EEEFF0;
                    font-size: 14px;
                    @include SourceHanSansCN-Regular;
                    position: relative;
                }

                .loding-more {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                }
            }
        }
    }

}
</style>